<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Group Manager</title>
    <link href="css/font.css" rel="stylesheet" type="text/css" media="all" />
    <link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
    <!-- Custom Theme files -->
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
    <!-- Custom Theme files -->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/respond.js"></script>
    <!-- Custom Theme files -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>

    <!--webfont-->
  
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $(".scroll").click(function(event){
                event.preventDefault();
                $('html,body').animate({scrollTop:$(this.hash).offset().top},1200);
            });
        });
    </script>
    <script>
        $(function(){
            $(".hov").hide();
            $(".text").hide();
            $(".col-md-3").hover(function(){
                        $(this).find(".hov").stop().fadeTo(286,0.5)
                        $(this).find(".text").stop().show();
                    },
                    function(){
                        $(this).find(".hov").stop().fadeTo(286,0)
                        $(this).find(".text").stop().hide();
                        // $(this).find(".text").animate({left:"-286px"}, {duration: 0})
                    });
            $(".btn-sub").click(function(){
                alert("Sure to disband your group?");
            });
        });
        var flag_SetAdmin = false;
        var Adm2Set=[];
        $(function(){
            $(".StopSetAdmin").hide();
            $(".FinishSetAdmin").hide();
            $(".StartSetAdmin").show();
        	$(".coverpage").hide();
        	$(".coverpageSelectMe").hover(function(){
                console.log('ssssss');
                if (flag_SetAdmin)
        		$(this).children('.coverpage').show();
        	},
        	function(){
                if(flag_SetAdmin)
        		$(this).children('.coverpage').hide();
        	});
            Array.prototype.indexOf = function(val) {
                for (var i = 0; i < this.length; i++)
                {
                    if (this[i] == val) return i;
                }
                return -1;
            };
            Array.prototype.remove = function(val) {
                var index = this.indexOf(val);
                if (index > -1)
                {
                    this.splice(index, 1);
                }
            };
            $(".coverpage").click(

                function(){
                    console.log($(this).nextAll('.userl').children('.watchp').children('img')[0].src.split('/').pop());
                    if($(this).parent().css('border') != '3px solid rgb(255, 86, 86)')
                    {
                        $(this).parent().css('border','3px solid rgb(255, 86, 86)');
                        Adm2Set.push($(this).nextAll('.userl').children('.watchp').children('img')[0].src.split('/').pop());
                    }
                    else {
                        $(this).parent().css('border','none');
                        Adm2Set.remove($(this).nextAll('.userl').children('.watchp').children('img')[0].src.split('/').pop());
                    }
                }
            );
        });
        function StartSetAdmin()
        {
            flag_SetAdmin = true;
            $(".StopSetAdmin").show();
            $(".FinishSetAdmin").show();
            $(".StartSetAdmin").hide();
        }
        function StopSetAdmin()
        {
            $(".StopSetAdmin").hide();
            $(".FinishSetAdmin").hide();
            $(".StartSetAdmin").show();
            flag_SetAdmin = false;
            $(".row").css("border","none");
            Adm2Set = [];
        }
        function FinishSetAdmin()
        {
            $(".StopSetAdmin").hide();
            $(".FinishSetAdmin").hide();
            $(".StartSetAdmin").show();
            flag_SetAdmin = false;
            $(".row").css("border","none");
            alert(Adm2Set);
            Adm2Set = [];
        }


    </script>
    <style>
        html {
            -ms-text-size-adjust: 100%;
            -webkit-text-size-adjust: 100%;
        }

        body
        {
            margin: 0;
        }

        .main-nav-a a:hover{
            color:#ff5656;
        }

        .main-nav-a a:focus{
            color:#ff8e92;
        }

        a span
        {
            font-size: 20px;
            font-weight: 700;
        }

        /*********************************************自定义部分*********************************************/
        .secondmenu a {
            font-size: 12px;
            color: #4A515B;
            text-align: center;
            border-radius: 4px;
        }

        .secondmenu > li > a:hover {
            background-color: rgba(179,137,68,0.7);
            color: #ffffff;
        }

        .secondmenu>li.focus {
            background-color: rgba(222,202,196,0.5);
            border-radius: 4px;
            color:#ff5656;
        }

        .secondmenu li.focus > a {
            color: #ff5656;
        }


    </style>
</head>
<body>
<!-- header-section-starts -->

<div class="navigation-strip">
    <div class="container">
        <div class="nav_content">
            <div class="home">
                <a href="index.html"><img src="images/imangine.png" alt="" /></a>
            </div>
            <div class="search">
                <form>
                    <input type="text" value="" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Search..';}"/>
                    <input type="submit" value="">
                </form>
            </div>
            <div class="reglogbar-user pull-right">
                <div class="userp">
                     <span>Jully Coco &nbsp;</span>
                    <a href="personal.html"> <img src="images/user-p.png" /> </a>
                </div>
            </div>
            <span class="menu"></span>
            <div class="top-menu">
                <ul>
                    <li><a href="pic.html">Picture</a></li>
                    <li><a href="album.html">Album</a></li>
                    <li><a href="group.html">Group</a></li>
                    <li><a href="search.html">Search</a></li>
                    <li><a href="about.html">About us</a></li>

                </ul>
            </div>
            <!-- script for menu -->
            <script>
                $( "span.menu" ).click(function() {
                    $( ".top-menu" ).slideToggle( "slow", function() {
                        // Animation complete.
                    });
                });
            </script>
            <!-- script for menu -->
            <div class="clearfix"></div>
        </div>
    </div>
</div>
<div class="content">
    <div class="container">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-3">
                    <div class="col-md-11" id="userinfo">
                       <a href="single-group.html"><img id="albumprof" src="images/a1.jpg" /></a>
                        <br />
                        <br />
                        <h3>Group Name</h3>
                        <p>Group Description</p>
                        <br />
                        <a><label>Manage Group Album</label></a>
                        <br />
                        <a><label>Modify Group Info</label></a>
                        <br />
                        <br />
                        <button id="btn-uppic">Add Album</button>
                        <br />
                        <br />
                        <button class="btn-sub">Disband</button>
                    </div>
                </div>
                <div class="col-md-9 watchlist">
                    <div class="watchlista">Total &nbsp; <span>5</span> &nbsp; people
                    <button class="batchDelete StartSetAdmin" onclick="StartSetAdmin()">Set Admin</button>
                    <button class="batchDelete StopSetAdmin" onclick="StopSetAdmin()">Cancel</button>
                    <button class="batchDelete FinishSetAdmin" onclick="FinishSetAdmin()">Finish</button>

            </div>
                    <div class="watch-list">
                        <div class="row">
                            <span class="line2"></span>
                        </div>
                        <div class="row coverpageSelectMe">
                            <div class="coverpage"></div>
                            <div class="userl">
                                <div class="col-md-2 watchp"> <img src="images/user-p.png"></div>
                                <div class="col-md-4 watchl">
                                    <label>Mint</label>
                                    <p>Please dont starve together</p>
                                </div>
                            </div>
                        </div>
                        <div class="row coverpageSelectMe">
                            <div class="coverpage"></div>
                            <div class="userl">
                                <div class="col-md-2 watchp"> <img src="images/user-p.png"></div>
                                <div class="col-md-4 watchl">
                                    <label>Mint</label>
                                    <p>Please dont starve together</p>
                                </div>
                            </div>
                        </div>
                        <div class="row coverpageSelectMe">
                            <div class="coverpage"></div>
                            <div class="userl">
                                <div class="col-md-2 watchp"> <img src="images/user-p.png"></div>
                                <div class="col-md-4 watchl">
                                    <label>Mint</label>
                                    <p>Please dont starve together</p>
                                </div>
                            </div>
                        </div>
                        <div class="row coverpageSelectMe">
                            <div class="coverpage"></div>
                            <div class="userl">
                                <div class="col-md-2 watchp"> <img src="images/user-p.png"></div>
                                <div class="col-md-4 watchl">
                                    <label>Mint</label>
                                    <p>Please dont starve together</p>
                                </div>
                            </div>
                        </div>
                        <div class="row coverpageSelectMe">
                            <div class="coverpage"></div>
                            <div class="userl">
                                <div class="col-md-2 watchp"> <img src="images/user-p.png"></div>
                                <div class="col-md-4 watchl">
                                    <label>Mint</label>
                                    <p>Please dont starve together</p>
                                </div>
                            </div>
                        </div>


                        <div class="clearfix"></div>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
</div>

<div class="footer">
    <div class="footer-top">
        <div class="container">
            <div class="col-md-4 footer-grid">
                <h5>ABOUT US</h5>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in purus nibh. Donec ornare felis neque. Nullam tortor nulla, sodales quis posuere quis, tristique nec libero. Proin vitae convallis odio. Morbi nec enim nisi. Aliquam erat volutpat. </p>
            </div>
            <div class="col-md-4 footer-grid">
                
            </div>
            <div class="col-md-4 footer-grid">
                <h5>FOLLOW US</h5>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in purus nibh. Donec ornare felis neque. Nullam tortor! </p>


            </div>
            <div class="clearfix"></div>
        </div>
    </div>
    <div class="footer-bottom">
        <div class="container">
            <div class="copyrights">
                <p>Copyright &copy; 2015.Imangine All rights reserved.</p>
            </div>
            <div class="go-top">
                <a href="#header" class="scroll"><img src="images/go-to-top.png" alt="" /></a>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>

</body>
</html>
